<template>
    <div class="header">
        <div class="header-left">
            <!-- 展开图标 -->
            <el-icon color="gary" size="40" v-show="menuStore.menuBoo" @click="menuStore.changeMenuBoo">
                <Expand />
            </el-icon>
            <!-- 折叠图标 -->
            <el-icon color="gary" size="40" v-show="!menuStore.menuBoo" @click="menuStore.changeMenuBoo">
                <Fold />
            </el-icon>
            <!-- 面包屑导航 -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{ route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="header-right" v-if="loginStore.userInfo" style="margin-right: 50px;">
            <el-dropdown>
                <span class="el-dropdown-link">
                   用户信息
                    <el-icon class="el-icon--right">
                        <CaretBottom />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="Account">账号管理</el-dropdown-item>
                        <el-dropdown-item @click="clickOut">注销账号</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useMenuStore } from '@/stores/menuCollapse';
import { useRoute, useRouter } from "vue-router"
import { ArrowDown } from '@element-plus/icons-vue'
import { useLoginStore } from '@/stores/login';

const route = useRoute()
const router = useRouter()
const menuStore = useMenuStore()
const loginStore = useLoginStore()
// 取出用户信息
const userInfo = ref<any>(JSON.parse(<string>localStorage.getItem("userInfo")))

// 点击注销
const clickOut = () => {
    // 清除pinia和缓存数据
    loginStore.changeUserInfo(null)
    localStorage.removeItem("userInfo")
    // 跳转登录页
    router.push("/login")
}
const Account = () => {
    // 清除pinia和缓存数据
    // 跳转登录页
    router.push("/user")
}
//图标状态默认为菜单展开
// const iconBoo = ref<boolean>(false)

//点击图标,修改pinia中菜单状态
// const clickIcon = () => {
// iconBoo.value = !iconBoo.value
// 调用仓库中修改状态的方法
// menuStore.changeMenuBoo()
// }
</script>

<style scoped lang="less">
.header {
    height: 100%;
    display: flex;
    align-items: center;

    .header-left {
        display: flex;
        align-items: center;
        float: right;

        .el-icon {
            margin-right: 30px;
        }
    }

    .header-right {
        display: flex;
        align-items: center;
        float: right;
        position: absolute;
        right: 5px;
        .el-avatar {
            //display: flex;
            //float: right;
            margin-right: 20px;
        }

        .example-showcase {
            .el-dropdown-link {
                cursor: pointer;
                color: var(--el-color-primary);
                display: flex;
                align-items: center;
            }
        }
    }
}
</style>